<template>
    <!--    <div style="-->
    <!--        width: 100%;-->
    <!--    height: 100vh;-->
    <!--    overflow: auto;-->
    <!--">-->
    <!--        &lt;!&ndash;        <lazy-component v-for="(img,i) in Array(100)" style="&ndash;&gt;-->
    <!--        &lt;!&ndash;            width: 50%;&ndash;&gt;-->
    <!--        &lt;!&ndash;            height: 30vh;&ndash;&gt;-->
    <!--        &lt;!&ndash;            overflow: auto;&ndash;&gt;-->
    <!--        &lt;!&ndash;        ">&ndash;&gt;-->
    <!--        &lt;!&ndash;            <div>&ndash;&gt;-->
    <!--        &lt;!&ndash;                <div v-for="(e1,i1) in Array(30)">i1</div>&ndash;&gt;-->
    <!--        &lt;!&ndash;                <div style="background-color: red;" v-text="i"></div>&ndash;&gt;-->
    <!--        &lt;!&ndash;            </div>&ndash;&gt;-->
    <!--        &lt;!&ndash;        </lazy-component>&ndash;&gt;-->
    <!--        <iscroll-view :options="{preventDefault: false}" style="height: 50vh;overflow: hidden">-->
    <!--            <div v-for="(e,i) in Array(200)">-->
    <!--                <div v-text="i"></div>-->
    <!--                <div>-&#45;&#45;&#45;&#45;</div>-->
    <!--            </div>-->
    <!--        </iscroll-view>-->


    <!--    </div>-->
    <div style="height: 50vh;overflow-y: hidden">
        <swiper :options="swiperOption" ref="swiper">
            <swiper-slide>
                <div v-for="(e,i) in Array(200)" :key="i" v-text="(Array(i)).join('-----公益ad收到')"></div>
            </swiper-slide>
        </swiper>
    </div>
</template>

<script>
    // import {Toast} from 'vant';
    // import Vue from 'vue';
    // import {Lazyload} from 'vant';
    // import IScrollView from 'vue-iscroll-view'

    import {Swiper, SwiperSlide} from 'vue-awesome-swiper';
    import 'swiper/css/swiper.css';

    /* Using these kinds of IScroll class for different cases. */
    import IScroll from 'iscroll'
    // import IScroll from 'iscroll/build/iscroll-infinite.js
    // import IScroll from 'iscroll/build/iscroll-probe.js
    // import IScroll from 'iscroll/build/iscroll-view.js
    // import IScroll from 'iscroll/build/iscroll-zoom.js
    // import IScroll from 'iscroll/build/iscroll-lite.js

    // Vue.use(IScrollView, IScroll)
    //
    // Vue.use(Lazyload, {
    //     lazyComponent: true,
    //     observer: true,
    //     observerOptions: {
    //         rootMargin: '0px',
    //         threshold: 0.1
    //     },
    //
    // });
    export default {
        name: "testonly",
        components: {
            Swiper,
            SwiperSlide,
        },
        data() {
            return {
                imageList: [
                    'https://img01.yzcdn.cn/vant/apple-1.jpg',
                    'https://img01.yzcdn.cn/vant/apple-1.jpg',
                    'https://img01.yzcdn.cn/vant/apple-1.jpg',
                    'https://img01.yzcdn.cn/vant/apple-2.jpg',
                    'https://img01.yzcdn.cn/vant/apple-2.jpg',
                    'https://img01.yzcdn.cn/vant/apple-2.jpg',
                    'https://img01.yzcdn.cn/vant/apple-2.jpg',
                    'https://img01.yzcdn.cn/vant/apple-2.jpg',
                    'https://img01.yzcdn.cn/vant/apple-2.jpg',
                ],
                swiperOption: {
                    scrollbar: {
                        el: '.swiper-scrollbar',
                        hide: true
                    },
                    direction: 'vertical',
                    slidesPerView: 'auto',
                    freeMode: true,
                    mousewheel: true,
                    // nested: true,
                    touchMoveStopPropagation: false,
                    //
                    resistanceRatio: .8,
                    freeModeMomentumBounceRatio: .5,
                    // simulateTouch: false,
                    // freeModeMomentumRatio: .7,
                    // freeModeMomentumVelocityRatio: 2,

                    // autoHeight: true,
                    // observer: true,
                    // observeParents: true,
                    // observeSlideChildren: true,
                    // virtualTranslate: true,
                    // on: {
                    //     sliderMove: () => {
                    //         this.sliderMove();
                    //     },
                    //     touchEnd() {
                    //         that.touchEnd();
                    //     },
                    //     init: function () {
                    //         // this.countN = 0;
                    //         // this.translateToBak = this.translateTo;
                    //         // this.setTranslateBak = this.setTranslate;
                    //     },
                    //     touchStart: this.touchStart,
                    //     touchMove: this.readyTranslate,
                    //     // touchEnd: function () {
                    //     //     console.log("refresh end")
                    //     // }
                    //     // progress: function (swiper, process) {
                    //     //     console.log('progress', swiper, process);
                    //     // }
                    // }
                },
            };
        },
        mounted() {
            window.currentVue = this;
            window.currentSwiper = this.$refs.swiper.$swiper;
        }
    };
</script>